<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页</title>
		<link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/index.css" />
	</head>

	<body class="application application-offset sidenav-pinned ready">
		<div class="container-fluid container-application">
			<div class="sidenav show" id="sidenav-main">
				<!-- Sidenav header -->
				<div class="sidenav-header d-flex align-items-center">
					<a class="navbar-brand" href="./index.html">
						<span class="logo">24课设</span>
					</a>
				</div>
				<!-- User mini profile -->
				<div
					class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center"
				>
					<!-- Avatar -->
					<div>
						<a href="#" class="avatar rounded-circle avatar-xl">
							<img alt="Image placeholder" src="./imgs/avatar.jpg" class="" />
						</a>
						<div class="mt-5">
							<h5 class="mb-0 text-white">前端方向</h5>
							<span class="d-block text-sm text-white opacity-8 mb-3"
								>就业数据平台</span
							>
							<a
								href="javascript:;"
								class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3"
							>
								<span class="btn-inner--text">前端方向</span>
							</a>
						</div>
					</div>
				</div>
				<!-- Application nav -->
				<div class="nav-application clearfix">
					<a href="./index.html" class="btn btn-square text-sm active">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-house bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">首页</span>
					</a>
					<a href="./student.html" class="btn btn-square text-sm">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-people bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">学生</span>
					</a>
					<a href="javascript:;" class="btn btn-square text-sm">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-columns bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">排版</span>
					</a>
					<a href="javascript:;" class="btn btn-square text-sm">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-files bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">资料</span>
					</a>
					<a href="javascript:;" class="btn btn-square text-sm">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-receipt bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">就业</span>
					</a>
					<a href="javascript:;" class="btn btn-square text-sm">
						<span class="btn-inner--icon d-block"
							><i class="bi bi-gear bi-2x"></i
						></span>
						<span class="btn-inner--icon d-block pt-2">设置</span>
					</a>
				</div>
				<!-- Misc area -->
				<div class="card bg-gradient-warning">
					<div class="card-body">
						<h5 class="text-white">哈喽, 朋友!</h5>
						<p class="text-white mb-4">
							为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
						</p>
						<a
							href="http://highcom.com.cn"
							class="btn btn-sm btn-block btn-white rounded-pill"
							target="_blank"
							>Get started</a
						>
					</div>
				</div>
			</div>
			<div class="main-content position-relative">
				<nav
					class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border"
					id="navbar-main"
				>
					<div class="container-fluid">
						<!-- Navbar nav -->
						<div
							class="collapse navbar-collapse navbar-collapse-fade"
							id="navbar-main-collapse"
						>
							<ul class="navbar-nav align-items-lg-center">
								<!-- Home  -->
								<li class="nav-item">
									<a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link pl-lg-0" href="./index.html"> 实训 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link pl-lg-0" href="./index.html"> 实训 </a>
								</li>
								<li class="nav-item">
									<a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
								</li>
							</ul>
							<!-- Right menu -->
							<ul
								class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex"
							>
								<li class="nav-item dropdown dropdown-animate">
									<a
										class="nav-link pr-lg-0"
										href="javascript:void(0)"
										role="button"
										data-toggle="dropdown"
										aria-haspopup="true"
										aria-expanded="false"
									>
										<div class="media media-pill align-items-center">
											<span class="avatar rounded-circle">
												<img alt="Image placeholder" src="./imgs/avatar.jpg" />
											</span>
											<div class="ml-2 d-none d-lg-block">
												<span class="mb-0 text-sm font-weight-bold username"
													>Admin</span
												>
											</div>
										</div>
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link pl-lg-0" id="logout" href="javascript:;">
										退出
									</a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
				<div class="page-content">
					<!-- Page Title -->
					<div class="page-title">
						<div class="row justify-content-between align-items-center">
							<div class="col-md-6 mb-3 mb-md-0">
								<h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
								<span class="text-sm text-white opacity-8">前端999标准版</span>
							</div>
						</div>
					</div>
					<!-- charts -->
					<div class="row">
						<div class="col-xl-3 col-md-6">
							<div class="card card-stats">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h6 class="text-muted mb-1">就业薪资</h6>
											<span class="h3 font-weight-bold mb-0 salary">15500</span>
										</div>
										<div class="col-auto">
											<i class="bi bi-coin"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-md-6">
							<div class="card card-stats">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h6 class="text-muted mb-1">班级人数</h6>
											<span class="h3 font-weight-bold mb-0 student_count"
												>80</span
											>
										</div>
										<div class="col-auto">
											<i class="bi bi-people"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-md-6">
							<div class="card card-stats">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h6 class="text-muted mb-1">平均年龄</h6>
											<span class="h3 font-weight-bold mb-0 age">24.40</span>
										</div>
										<div class="col-auto">
											<i class="bi bi-calendar2-week"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-md-6">
							<div class="card card-stats">
								<!-- Card body -->
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h6 class="text-muted mb-1">小组个数</h6>
											<span class="h3 font-weight-bold mb-0 group_count"
												>8</span
											>
										</div>
										<div class="col-auto">
											<i class="bi bi-collection"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col col-xl-8">
							<div class="card" id="line" style="height: 400px;"></div>
						</div>
						<div class="col col-xl-4">
							<div class="card" id="salary" style="height: 400px;"></div>
						</div>
						<div class="col col-xl-12">
							<div class="card" style="height: 400px;">
								<div class="card-header">
									<div
										class="d-flex justify-content-between align-items-center"
									>
										<h6 class="mb-0">班级每组薪资</h6>
										<div id="btns">
											<button type="button" class="btn btn-xs btn-blue">
												1
											</button>
											<button type="button" class="btn btn-xs">2</button>
											<button type="button" class="btn btn-xs">3</button>
											<button type="button" class="btn btn-xs">4</button>
											<button type="button" class="btn btn-xs">5</button>
											<button type="button" class="btn btn-xs">6</button>
											<button type="button" class="btn btn-xs">7</button>
											<button type="button" class="btn btn-xs">8</button>
										</div>
									</div>
								</div>
								<div class="card-body p-0" id="lines"></div>
							</div>
						</div>
						<div class="col col-xl-4">
							<div class="card" id="gender" style="height: 500px;"></div>
						</div>
						<div class="col col-xl-8">
							<div class="card" id="map" style="height: 500px;"></div>
						</div>
					</div>
					<!-- footer -->
					<div class="footer pt-5 pb-4 footer-light" id="footer-main">
						<div class="row text-center text-sm-left align-items-sm-center">
							<div class="col-sm-6">
								<p class="text-sm mb-0">
									© 2024
									<a href="" class="h6 text-sm" target="_blank">前端方向</a>.
									All rights reserved.
								</p>
							</div>
							<div class="col-sm-6 mb-md-0">
								<ul class="nav justify-content-center justify-content-md-end">
									<li class="nav-item">
										<a class="nav-link" href="#">Support</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Terms</a>
									</li>
									<li class="nav-item">
										<a class="nav-link pr-0" href="#">Privacy</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- toast -->
		<div
			class="toast bg-rgba my-toast"
			data-bs-delay="1500"
			aria-live="assertive"
			aria-atomic="true"
			role="alert"
		>
			<div class="toast-body">提示消息</div>
		</div>
		<script src="./bootstrap/bootstrap.min.js"></script>
		<script src="./lib/axios.js"></script>
		<script src="./lib/echarts.min.js"></script>
		<script src="./lib/china.js"></script>
		<!-- 公共逻辑 -->
		<script src="./js/common.js"></script>
		<!-- 核心逻辑 -->
		<script src="./js/index.js"></script>
	</body>
</html>
